<template>
  <u-tabbar
    :value="value"
    @change="change"
    zIndex="999999"
    inactiveColor="rgba(0,0,0,0.5)"
    activeColor="#138E88"
  >
    <u-tabbar-item name="1" text="首页">
      <image
        class="slot-icon"
        mode="heightFix"
        slot="active-icon"
        src="../static/nav/select_nav_index.png"
      ></image>
      <image
        class="slot-icon"
        mode="heightFix"
        slot="inactive-icon"
        src="../static/nav/nav_index.png"
      ></image>
    </u-tabbar-item>
    <u-tabbar-item name="2"text="公司治理" v-if="getPermissions('/pages/company/company')">
      <image
        class="slot-icon"
        mode="heightFix"
        slot="active-icon"
        src="../static/nav/select_nav_company.png"
      ></image>
      <image
        class="slot-icon"
        mode="heightFix"
        slot="inactive-icon"
        src="../static/nav/nav_company.png"
      ></image>
    </u-tabbar-item>
    <u-tabbar-item name="3" text="员工关系" v-if="getPermissions('/pages/staff/staff')">
      <image
        class="slot-icon"
        mode="heightFix"
        slot="active-icon"
        src="../static/nav/select_nav_staff.png"
      ></image>
      <image
        class="slot-icon"
        mode="heightFix"
        slot="inactive-icon"
        src="../static/nav/nav_staff.png"
      ></image>
    </u-tabbar-item>
    <u-tabbar-item name="4" text="合同管理" v-if="getPermissions('/pages/contract/contract')">
      <image
        class="slot-icon"
        mode="heightFix"
        slot="active-icon"
        src="../static/nav/select_nav_contract.png"
      ></image>
      <image
        class="slot-icon"
        mode="heightFix"
        slot="inactive-icon"
        src="../static/nav/nav_contract.png"
      ></image>
    </u-tabbar-item>
    <u-tabbar-item name="5" text="企业信息">
      <image
        class="slot-icon"
        mode="heightFix"
        slot="active-icon"
        src="../static/nav/select_nav_enterpriseInfo.png"
      ></image>
      <image
        class="slot-icon"
        mode="heightFix"
        slot="inactive-icon"
        src="../static/nav/nav_enterpriseInfo.png"
      ></image>
    </u-tabbar-item>
  </u-tabbar>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      permissions: []
    }
  },
  mounted() {
    this.permissions = uni.getStorageSync('permissions') || []
  },
  methods: {
    change(i) {
      if(this.value == '') {
        return
      }
      if(i == 1) {
        this.jumpTab('/pages/index/index')
      } else if(i==2) {
        this.jumpTab('/pages/company/company')
      } else if(i == 3) {
        this.jumpTab('/pages/staff/staff')
      } else if(i == 4) {
        this.jumpTab('/pages/contract/contract')
      } else if(i == 5) {
        this.jumpTab('/pages/enterpriseInfo/enterpriseInfo')
      }
    },
    getPermissions(path) {
      if(this.value == '') {
        return true
      }
      return this.permissions.findIndex(v => v == path) != -1
    },
  }
}
</script>

<style lang="scss" scoped>
.slot-icon {
  width: auto;
  height: 40rpx;
}
.u-tabbar-item__text {
  margin-top: 8rpx;
  font-size: 24rpx;
}
</style>
